option1 = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    right:0,
    top:5,
    data: ['违规', '报警','处罚'],
    textStyle: {
        color: '#fff',
        fontSize: 14,
        borderColor:'red'
    },
  },
  grid: {
    left: 0,
    top:75,
    bottom:40,
    right:10,
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,//坐标轴两边留白
    data: ['16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
    axisLabel: { //坐标轴刻度标签的相关设置。
      //	margin:15,
      textStyle: {
        color: '#999',
        fontStyle: 'normal',
        fontSize: 13,
        padding:[10,0,0,0]
      },

      //rotate:50,
    },
    axisTick:{//坐标轴刻度相关设置。
      show: false,
    },
    axisLine:{//坐标轴轴线相关设置
      lineStyle:{
        color:'#999',
        // opacity:0.2
      }
    },
    splitLine: { //坐标轴在 grid 区域中的分隔线。
      show: true,
      lineStyle: {
        color: '#434546',
        type:"dashed"
        // 	opacity:0.1
      }
    }
  },
  yAxis: [
    {
      type: 'value',
      splitNumber: 5,
      axisLabel: {
        textStyle: {
          color: '#a8aab0',
          fontStyle: 'normal',
          fontFamily: '微软雅黑',
          fontSize: 12,
        }
      },
      axisLine:{
        show: false
      },
      axisTick:{
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#434546',
          type:"dashed"
          // 	opacity:0.1
        }
      }

    }
  ],
  series: [
    {
      name: '违规',
      type: 'line',
      smooth:true,
      itemStyle: {
        normal: {
          color:'#00D2E7',
          lineStyle: {
            color: "#00D2E7",
            width:1
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: 'rgba(255, 255, 255, 0.1)'
            }, {
              offset: 1,
              color: 'rgba(0,210,231,.5)'
            }]),
          }
        }
      },
      data: [ 37, 12, 18, 15, 16, 23.5, 22.5,37, 12, 18, 15, 16, 23, 22,40]
    },
    {
      name: '报警',
      type: 'line',
      smooth:true,
      itemStyle: {
        normal: {
          color:'#F9A100',
          lineStyle: {
            color: "#F9A100",
            width:1
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: 'rgba(255,255,255,.1)'
            }, {
              offset: 1,
              color: 'rgba(249,161,0,.5)'
            }]),
          }
        }
      },
      data: [20, 14,10,9,24,17,20, 14,10,9,24,17,20, 14,10]
    },
    {
        name: '处罚',
        type: 'line',
        smooth:true,
        itemStyle: {
            normal: {
                color:'#FF4848',
                lineStyle: {
                    color: "#FF4848",
                    width:1
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: 'rgba(255,255,255,.1)'
                    }, {
                        offset: 1,
                        color: 'rgba(255,72,72,.5)'
                    }]),
                }
            }
        },
        data: [17,20, 14,10,9,24,20, 14,10,9,24,17,20, 24,30]
    }
  ]
};
var myChart1 = echarts.init(document.getElementById('charts1'));
myChart1.setOption(option1);

option2 = {
    color:[
        "#0FC5F3",
        "#A16EFF",
        "#17D8A1",
        "#FFDD07",
        '#327BFA',
        "#141618"
    ],
    tooltip: {
        show:true,
        formatter: function (obj){
            var i = obj.name.split('-')[0];
            return i + ":"+ obj.value +"条"
        }
    },
    legend: {
        selectedMode:false,
        right: 0,
        top: 35,
        orient:'vertical',
        data: [
            {name: '设备离线报警-10',textStyle: {color: '#0FC5F3'}},
            {name: '车辆超速报警-15',textStyle: {color: '#A16EFF'}},
            {name: '路线偏离报警-15',textStyle: {color: '#17D8A1'}},
            {name: '黑车拉运-25',textStyle: {color: '#FFDD07'}},
            {name: '无证作业-20',textStyle: {color: '#327BFA'}}
        ],
        textStyle:{
            color : "#fff",
            fontSize:14,
            rich:{
                a:{
                    fontSize:24,
                },
                b:{
                    display:"inlineBlock",
                    width:88
                }
            }
        },
        itemGap: 20 ,
        icon:'circle',
        formatter: function (data){
            var i = data.split('-');
            return "{b|"+i[0]+"}"+"{a|"+i[1]+"}" +"条"
        }

    },
    grid: {
        left: 50,
        top:50
    },
    series: [
        {
            type: 'pie',
            radius: [50, 110],
            center: ['30%', '48%'],
            roseType: 'radius',
            label: {
                show: false
            },
            data: [
                {value: 10, name: '设备离线报警-10'},
                {value: 5, name: '车辆超速报警-15'},
                {value: 15, name: '路线偏离报警-15'},
                {value: 25, name: '黑车拉运-25'},
                {value: 20, name: '无证作业-20'}
            ]
        },
        {
            name:"报警总数",
            center:["30%","48%"],
            radius:[0,50],
            type: 'pie',
            label: {
                normal: {
                    show: true,
                    position:"center",
                    formatter:function(data){
                        return "{a|200}\n{b|报警总数}"
                    },
                    rich:{
                        a:{
                            fontSize:26,
                            color:"#fff",
                            lineHeight:28,
                            marginBottom:20
                        },
                        b:{
                            fontSize:12,
                            color:"#999"
                        }
                    }
                }
            },
            z:0,
            data: [0]
        }
    ]
};
var myChart2 = echarts.init(document.getElementById('charts2'));
myChart2.setOption(option2);



option3 = {
    tooltip: {
        trigger: 'axis',
        show: false,
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
    },
    legend: {
        selectedMode: false,
        show: false,
    },
    grid: {
        top:0,
        left: 0,
        right: '4%',
        bottom: '10px',
        containLabel: true
    },
    xAxis: [{
        splitLine: {
            show: true,
            lineStyle: {
                color: '#434546',
                type:"dashed"
            }
        },
        axisTick: {
            show: false
        },
        axisLine:{
            show: false,
            lineStyle:{
                color:'#999'
            }
        },
        position:'top',
        boundaryGap: false,
        type: 'value',
        show: true,

        axisLabel: { //坐标轴刻度标签的相关设置。
            margin:15,
            textStyle: {
                color: '#999',
                fontStyle: 'normal',
                fontSize: 13,
                padding:[10,0,0,0]
            }
        }
    }],
    yAxis: [{
        splitLine: {
            show: false,
            lineStyle: {
                color: '#434546',
                type:"dashed"
            }
        },
        axisLine: { //y轴
            show: true
        },
        type: 'category',
        boundaryGap: false,
        axisTick: {
            show: false
        }, //
        data: ['蜀山区', '政务区', '高新区', '经开区', '新站区', '瑶海区', '庐阳区' , '包河区',
            '滨湖区', '巢湖市', '肥西县' ,'肥东县', '长丰县', '庐江县' ],
        axisLabel: {
            textStyle: {
                color: '#a8aab0',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
            }
        }
    }],
    series: [{
        name: '标准化',
        type: 'bar',
        barWidth: 12, // 柱子宽度
        label: {
            show: true,
            position: 'right', // 位置
            color: '#1CD8A8',
            fontSize: 14,
            fontWeight: 'bold', // 加粗
            distance: 5 // 距离
        }, // 柱子上方的数值
        itemStyle: {
            barBorderRadius: [6, 6, 6, 6], // 圆角（左上、右上、右下、左下）
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                '#F9A100', '#F9A100'
            ].map((color, offset) => ({
                color,
                offset
            }))), // 渐变
        },
        data: [30, 32, 31, 37, 54, 41, 52,30, 32, 31, 37, 29, 41, 52]
    }, ]
};
var myChart3 = echarts.init(document.getElementById('charts3'));
myChart3.setOption(option3);
